<template>
	<view class="toast-box" :class="{show:isShow}" :animation="animationData">
		<view class="toast-content">
			<view class="toast-img">
				<block v-if="type=='success'">
					<image class="toast-icon" :src="icon" />
				</block>
			</view>
			<view class="toast-title">{{title}}</view>
		</view>
	</view>

</template>

<script>
	export default {
		name:'toast',
		data() {
			return {
				type: 'fail',
				title: '你还没有勾选呢！',
				isShow: false,
				animationData: '',
				icon: ''
			}
		},
		methods: {
			showToast: function(data) {
				const self = this;
				if (this._showTimer) {
					clearTimeout(this._showTimer)
				}
				if (this._animationTimer) {
					clearTimeout(this._animationTimer)
				}
				// display需要先设置为block之后，才能执行动画
				this.setData({
					title: data.title,
					type: data.type,
					isShow: true,
				});
				this._animationTimer = setTimeout(() => {
					const animation = uni.createAnimation({
						duration: 500,
						timingFunction: 'ease',
						delay: 0
					})
					animation.opacity(1).step();
					self.setData({
						animationData: animation.export(),
					})
				}, 50)
				this._showTimer = setTimeout(function() {
					self.hideToast();
					if (data.compelete && (typeof data.compelete === 'function')) {
						data.compelete()
					}
				}, 1200 || (50 + data.duration))
			},
			hideToast: function() {
				if (this._hideTimer) {
					clearTimeout(this._hideTimer)
				}
				let animation = wx.createAnimation({
					duration: 200,
					timingFunction: 'ease',
					delay: 0
				})
				animation.opacity(0).step();
				this.setData({
					animationData: animation.export(),
				})
				this._hideTimer = setTimeout(() => {
					this.setData({
						isShow: false,
					})
				}, 250)
			}
		}
	}
</script>
<style>
	.toast-box {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 11;
		display: none;
		opacity: 0;
	}

	.show {
		display: block;
	}

	.toast-content {
		position: absolute;
		left: 50%;
		top: 35%;
		width: 350rpx;
		/*height: 250rpx;*/
		border-radius: 10rpx;
		box-sizing: bordre-box;
		transform: translate(-50%, -50%);
		background: rgba(0, 0, 0, .7);
	}

	.toast-img {
		width: 100%;
		height: 120rpx;
		padding-top: 15rpx;
		box-sizing: bordre-box;
		text-align: center;
	}

	.toast-icon {
		width: 100rpx;
		height: 100rpx;
	}

	.toast-title {
		width: 100%;
		padding: 10rpx;
		line-height: 65rpx;
		color: white;
		text-align: center;
		font-size: 40rpx;
		box-sizing: border-box;
	}
</style>